<template>
	<view class="page">

		<view class="page-bg">
			<image style="width: 100%; height: 597rpx;" src="https://test.uaima.cn/public/static/img/bg.png" mode=""></image>
		</view>
		<view class="page-navbar" style="position: sticky;top: 0rpx;z-index: 11;"
			:style="{paddingTop: `${statusBarHeight + 10}px`, width: `calc(100% - ${MenuButtonBoundingClientRectWidth + 30}px)`,marginLeft:'30rpx'}">
			<view style="font-size: 34rpx;color: #181818;line-height: 40rpx;">
				个人中心
			</view>
		</view>
		<view>
			<view class="userInfo">
				<u-avatar size="110rpx" :src="userInfo.avatar"></u-avatar>
				<!-- <image class="avatar" :src=""></image> -->
				<view class="userinfo-info ml-50">
					<button v-if="notLogin" class="btnPure" open-type="getPhoneNumber" style="font-size: 34rpx" @click="login">
						点击登录
					</button>
					<template v-else>
						<view>{{userInfo.nickname || '-'}}</view>
						<view>124124124124</view>
					</template>
				</view>
			</view>
		</view>
		<view class="product-show">
			<view class="product-show-item" @click="route_collectAndRecord(1)">
				<image class="bg" src="https://test.uaima.cn/public/static/img/mine/0.png"></image>
				<view class="item">
					<view>商品收藏</view>
					<view>5</view>
				</view>
			</view>
			<view class="product-show-item" @click="route_collectAndRecord(2)">
				<image class="bg" src="https://test.uaima.cn/public/static/img/mine/1.png"></image>
				<view class="item">
					<view>最近浏览</view>
					<view>5</view>
				</view>
			</view>
		</view>
		<view class="orders">
			<view class="page-commodityList-title">
				<view style="font-weight: 500;font-size: 32rpx;color: #333333;">
					我的订单
				</view>
				<view class="page-commodityList-title-option" @click="route_order({})">
					<text style="font-weight: 400;font-size: 26rpx;color: #666666;">查看更多</text>
					<image style="width: 40rpx; height: 40rpx;" src="https://test.uaima.cn/public/static/icon/arrow-right-top-green.png" mode=""></image>
				</view>
			</view>
			<view class="orders-list">
				<view class="orders-list-item" v-for="(item,index) in orderList" :key="index" @click="route_order(item)">
					<image class="cover" :src="`https://test.uaima.cn/public/static/img/mine/${index + 1}.png`"></image>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="operations">
			<view class="operations-item" v-for="(item,index) in operationList" :key="index" @click="startOperation(item)">
				<view class="info">
					<image class="cover" :src="`https://test.uaima.cn/public/static/img/mine/${index + 2}.png`"></image>
					<view class="name">{{item.name}}</view>
				</view>
				<image class="icon-right" src="https://test.uaima.cn/public/static/img/mine/6.png"></image>
			</view>
		</view>

		<!-- 联系客服 -->
		<u-popup mode='center' :show="customerService.show" round="20rpx">
			<view class="customerService text-center">
				<view class="text-34 font-bold mt-44" style="color: #000000;">联系客服</view>
				<view class="mt-12 text-28 font-medium c_666666">如遇到问题请联系工作人员</view>
				<view class="flex justify-content_center mt-44">
					<u--image :showLoading="true" src="" width="260rpx" height="260rpx"></u--image>
				</view>
				<view class="btn">一键拨打电话</view>
				<image class="wh52 closeCustomerService" @click="close_customerService" src="https://test.uaima.cn/public/static/mine/close.png">
				</image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import msg from "@/utils/msg.js"
	export default {
		data() {
			return {
				// 客服
				customerService: {
					show: false
				},
				statusBarHeight: 0,
				orderList: [{
					name: '待支付',
					type: ''
				}, {
					name: '待发货',
					type: ''
				}, {
					name: '已发货',
					type: ''
				}, {
					name: '已完成',
					type: ''
				}, {
					name: '售后',
					type: ''
				}, ],
				operationList: [{
					name: '客服热线',
					type: 'customerService',
				}, {
					name: '我的地址',
					url: "/pages/user/address"
				}, {
					name: '意见反馈',
					url: "/pages/main/feedback"
				}, {
					name: '设置',
					url: "/pages/main/setting"
				}],
				notLogin: false,
				userInfo: {}
			}
		},
		onLoad() {
			this.getHeight()
		},
		onShow() {
			if (uni.getStorageSync('accessToken')) {
				this.notLogin = false;
				this.userinfo()
			} else {
				this.notLogin = true
			}
		},
		methods: {
			userinfo() {
				this.$iApi.userinfo().then(res => {
					this.userInfo = res.data;
				})
			},
			login(val) {
				let that = this;
				wx.getUserProfile({
					lang: 'zh_CN',
					desc: '需要获取您的信息用来展示',
					success: userRes => {
						wx.login({
							provider: 'weixin',
							complete(res) {
								if (res.errMsg === 'login:ok') {
									that.$iApi.wxappAuth({
										code: res.code,
										encryptedData: userRes.encryptedData,
										iv: userRes.iv,
									}).then(wxRes => {
										uni.setStorageSync('accessToken', wxRes.data.token)
										uni.removeStorageSync('notLogin')
										msg.toast("登录成功")
										that.notLogin = false;
										that.userinfo()
									})
								}
							}
						})
					},
					fail(err) {
						console.log(err);
					}
				})

			},
			startOperation(item) {
				if (item.type === 'customerService') return this.open_customerService()
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			open_customerService() {
				this.customerService.show = true;
			},
			close_customerService() {
				this.customerService.show = false;
			},
			route_order() {
				uni.navigateTo({
					url: "/pages/order/index"
				})
			},
			route_collectAndRecord(type) {
				uni.navigateTo({
					url: "/pages/main/productCollectAndRecord" + `?type=${type}`
				})
			},
			// 获取微信右上角胶囊高度
			getHeight() {
				const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight;
				const MenuButtonBoundingClientRect = wx.getMenuButtonBoundingClientRect()
				this.MenuButtonBoundingClientRectWidth = MenuButtonBoundingClientRect.width
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.btnPure {
		background-color: transparent;

		&::after {
			border: none;
		}
	}

	.wh52 {
		$wh: 52rpx;
		width: $wh;
		height: $wh;
	}

	.page {
		&-bg {
			position: fixed;
			top: 0;
			width: 100%;
			height: 597rpx;
		}

		.userInfo {
			position: relative;
			z-index: 11;
			display: flex;
			align-items: center;
			margin-left: 30rpx;
			margin-top: 72rpx;

			.avatar {
				width: 110rpx;
				height: 110rpx;
				border: 2rpx solid #151515;
				border-radius: 50%;
				margin-right: 30rpx;
			}

			.userinfo-info {
				view:first-child {
					font-weight: 800;
					font-size: 34rpx;
					color: #151515;
				}

				view:last-child {
					font-weight: 400;
					font-size: 26rpx;
					color: #151515;
					margin-top: 8rpx;
				}
			}
		}
	}

	.product-show {
		display: flex;
		justify-content: space-between;
		margin-top: 36rpx;
		padding: 0 30rpx;

		.product-show-item {
			width: 330rpx;
			height: 130rpx;
			position: relative;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: inherit;
				height: inherit;
			}

			.item {
				display: flex;
				align-items: center;
				position: relative;
				justify-content: space-between;
				width: 330rpx;
				height: inherit;

				view:first-child {
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					margin-left: 30rpx;
				}

				view:last-child {
					font-weight: 600;
					font-size: 42rpx;
					color: #FFFFFF;
					margin-right: 30rpx;
				}
			}
		}
	}

	.orders {
		width: 690rpx;
		height: 260rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 24rpx auto 0;

		.page-commodityList-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 40rpx 40rpx 0 0;
			padding: 30rpx 30rpx 0;

			&-option {
				display: flex;
				align-items: center;
			}
		}

		&-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			margin-top: 38rpx;

			&-item {
				&:first-child {
					margin-left: 35rpx;
				}

				&:last-child {
					margin-right: 39rpx;
				}
			}

			.cover {
				width: 54rpx;
				height: 54rpx;
			}

			.name {
				margin-top: 12rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #181818;
			}
		}
	}

	.operations {
		width: 690rpx;
		margin: 24rpx auto 0;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		&-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 35rpx 0;
			margin: 0 30rpx;

			&:not(:first-child) {
				border-top: 2rpx solid #D9D9D9;
			}

			.info {
				display: flex;
				align-items: center;
			}

			.cover {
				width: 48rpx;
				height: 48rpx;
			}

			.name {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				margin-left: 30rpx;
			}

			.icon-right {
				width: 15rpx;
				height: 26rpx;
			}
		}
	}

	.customerService {
		width: 580rpx;
		height: 652rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.btn {
			width: 498rpx;
			height: 92rpx;
			margin: 56rpx auto 0;
			line-height: 92rpx;
			text-align: center;
			background: #28BA54;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.closeCustomerService {
			position: relative;
			top: 98rpx;
		}
	}
</style>